<template>
    <div>
        <mHeader></mHeader>
        <div class="main-con">
            <div class="left_main">
                <leftMenu></leftMenu>
            </div>
            <div class="rightMain">
                <!-- 用户 -->
                <div class="r_main">
                    <div class="swiperB">
                        <div v-for="item in banner" :key="item.id" @click="goCol('/columnIndex', item.col_id)"
                            style="cursor: pointer;">
                            <img :src="item.image" alt="">
                            <div class="ad">
                                <div class="downtime">距结束
                                    <donwTime :totalSeconds="item.countdown" />
                                </div>
                                <div class="info">
                                    <p>{{ item.title }}</p>
                                    <span class="line2">{{ item.introd }}</span>
                                    <div class="pb">
                                        <div class="price">
                                            <div>
                                                <div class="now">￥<span>{{ item.price }}</span></div>
                                            </div>
                                            <div>
                                                <div style="color: #999;">（￥<span>{{ item.old_price }}</span>）
                                                </div>
                                            </div>
                                        </div>
                                        <div v-if="item.is_pay != 1" class="btn"
                                            @click.stop="openCol(item.col_id, item.id)">
                                            抢购</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="contentList">
                        <!-- 问答 -->
                        <div class="type">
                            <div class="tab">
                                <span class="title">问答</span>
                                <div>
                                    <div v-for="item in zType" :key="item.id" :class="zt == item.id ? 'actives' : ''"
                                        @click="getz(item.id)">{{ item.name
                                        }}
                                        <div class="botLine">
                                            <span :class="{ active: item.id == zt }"></span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="list infinite-list">
                                <div v-for="(item, index) in zList" :key="index">
                                    <lexcerpt :maxWidth="400" :list="item" />
                                </div>
                            </div>
                            <el-empty description="没有内容了" v-if="zList.length == 0"></el-empty>

                        </div>

                        <!-- 摘抄 -->
                        <div class="type">
                            <div class="tab">
                                <span class="title">摘抄</span>
                                <div>
                                    <div v-for="item in eType" :key="item.id" :class="et == item.id ? 'actives' : ''"
                                        @click="gete(item.id)">{{ item.name
                                        }}
                                        <div class="botLine">
                                            <span :class="{ active: item.id == et }"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="list infinite-list">
                                <div v-for="(item, index) in wList" :key="index">
                                    <lanswer :maxWidth="130" :list="item" @reList="getExpId" />
                                </div>
                            </div>
                            <el-empty description="没有内容了" v-if="wList.length == 0"></el-empty>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog :visible.sync="showPay" width="400px" @close="clearTimer">
                <span slot="title" class="dialog-header">
                    <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>微信扫码支付
                </span>
                <div style="display: flex;align-items: center;justify-content: center;">
                    <img style="max-width: 300px;max-height: 300px;" :src="pay_img" alt="">
                </div>
            </el-dialog>

            <el-dialog top="40vh" title="提示" :visible.sync="showCol" width="350px">
                <span slot="title" class="dialog-header" style="font-size: 18px;">
                    <i style="color:#d41f19;margin-right: 12px;" class="el-icon-money"></i>闪购专栏支付方式
                </span>
                <span class="dialog-footer2">
                    <el-button type="success" @click="buyNow(1)">微信支付</el-button>
                    <el-button type="primary" @click="buyNow(2)">余额支付</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import lexcerpt from './l-excerpt/index.vue'
import lanswer from './l-answer/index.vue'
import leftMenu from '@/components/leftMenu.vue';
import donwTime from './downtime/index.vue';
import { baseUrl } from '@/apis/index'

export default {
    components: {
        leftMenu, lexcerpt, lanswer, donwTime
    },
    data() {
        return {
            list: [],
            dialogVisible: false,
            form: { type: '' },

            zType: [],
            eType: [],
            wList: [],
            wtotalPage: 1,
            wpageNum: 1,
            zList: [], // 问答 专栏列表
            ztotalPage: 1,
            zpageNum: 1,
            zt: 0,
            et: 0,
            curType: 1,
            banner: [],
            timer: null,
            showPay: false,
            pay_img: '',
            showCol: false,
            col_id: '',
            adv_id: ''
        };
    },
    computed: {
        path() {
            return this.$route.path
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
        this.getSociety()
        this.getzList()
        this.getExcerpt()
    },
    watch: {
        wList: {
            handler(val) {
            }, deep: true
        }
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },
    methods: {
        goCol(url, id) {
            if (id) {
                // 另页打开
                const route = this.$router.resolve({
                    path: url,
                    query: { id }
                });
                window.open(route.href, '_blank');

            }
        },
        openCol(col_id, adv_id) {
            let token = localStorage.getItem('token');
            if (!token) {
                this.$message({
                    message: '请先登录',
                    type: 'error'
                })
                return false;
            }

            this.showCol = true
            this.col_id = col_id
            this.adv_id = adv_id
        },

        buyNow(op) {
            let params = {
                id: this.col_id,
                is_sg: 2,
                sg_id: this.adv_id,
                pay_op: op
            }
            this.$api.payCol(params).then(res => {
                if (res.data.code == 1) {
                    this.showCol = false
                    if (op == 1) {
                        this.showPay = true
                        this.pay_img = baseUrl + 'home/base/qrcod?url=' + res.data.data.code_url;
                        this.query_col(res.data.data.id)
                    } else {
                        this.$message({
                            message: '购买成功',
                            type: 'success'
                        })
                        this.getSociety()

                    }
                }
            })
        },

        query_col(id) {
            // 3秒定时执行
            this.timer = setInterval(() => {
                let params = {
                    id
                }

                this.$api.queryColumn(params).then(res => {
                    if (res.data.code == 1) {
                        this.showPay = false
                        this.$message({
                            message: '购买闪购成功',
                            type: 'success'
                        })
                        this.clearTimer()
                        this.getSociety()

                    }
                })
            }, 3000)
        },

        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },

        getExpId(info) {
            let list = this.wList
            let id = info.id
            let op = info.op
            let status = info.status

            list.forEach((i, d) => {
                if (id == i.id) {
                    if (op == 2) {
                        this.wList[d].is_like = status
                        // 点赞
                        if (status == 1) {
                            this.wList[d].likes += 1
                        } else {
                            this.wList[d].likes -= 1
                        }
                    } else {
                        // 展开
                        this.wList[d].views += 1
                    }
                }
            })
        },
        getExcerpt() {
            this.wloading = true
            let params = {
                page: this.wpageNum,

                tid: this.et
            }

            this.$api.getAllExcerpt(params).then(res => {
                let response
                if (res.data.code == 1) {
                    this.wtotalPage = res.data.data.last_page
                    this.wList = this.wList.concat(res.data.data.data);
                    this.wloading = false
                }

            })
        },
        getzList() {
            this.zloading = true
            let params = {
                page: this.zpageNum,
                tid: this.zt
            }

            this.$api.getWdList(params).then(res => {
                let response
                if (res.data.code == 1) {
                    this.ztotalPage = res.data.data.last_page
                    this.zList = this.zList.concat(res.data.data.data);
                    this.zloading = false
                }

            })
        },
        // 社群互动
        getSociety() {
            this.$api.getSociety().then(res => {
                console.log(res)
                if (res.data.code == 1) {
                    this.banner = res.data.data.banner
                    this.zType = [{ id: 0, name: '全部' }, ...res.data.data.cate]
                    this.eType = [{ id: 0, name: '全部' }, ...res.data.data.cate1]

                }
            })
        },

        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                this.load()
                this.load2()
            }
        },
        getz(i) {
            this.zt = i
            this.zpageNum = 1
            this.zList = []
            this.getzList()
        },
        gete(i) {
            this.et = i
            this.wpageNum = 1
            this.wList = []
            this.getExcerpt()
        },
        getw(i) {
            this.wt = i
        },


        load() {
            console.log('触底了1');
            var page = this.zpageNum
            //如果请求未结束就返回不连续请求
            if (this.zloading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.ztotalPage) {
                // this.getzList()

                return false;
            }
            page = parseInt(page) + 1
            this.zpageNum = page
            this.getzList()

        },
        load2() {
            console.log('触底了2');
            var page = this.wpageNum
            //如果请求未结束就返回不连续请求
            if (this.wloading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.wtotalPage) {
                // this.getExcerpt()

                return false;
            }
            page = parseInt(page) + 1
            this.wpageNum = page
            this.getExcerpt()

        },
        getTabtype(t, url) {
            this.curType = t

        },
        onSubmit() {
            console.log('submit!', this.form);
        },
        goPage(url) {
            if (this.path != url) {
                this.$router.push(url)
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.dialog-footer2 {
    display: flex;
    justify-content: center;

    button {
        width: 90px;
        height: 40px;
        font-size: 15px;
        line-height: 40px;
        padding: 0;
    }
}

.main-con {
    display: flex;

    .left_main {
        margin-right: 1.04rem;
    }
}

.rightMain {
    flex: 1;
}

.swiperB {
    display: flex;
    align-items: centers;
    height: 400px;

    >div {
        width: 50%;
        margin-right: 18px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #000000;

        .ad {
            position: absolute;
            top: calc(50% - 120px);
            left: 0px;
            background-color: #fff;

            .downtime {
                color: #fff;
                padding: 12px 30px;
                font-size: 18px;
                display: flex;
                align-items: center;
                background-color: #D41F19;
            }

            .info {
                padding: 16px 19px 16px 16px;
                width: 320px;

                >p {
                    font-weight: bold;
                    font-size: 24px;
                    color: #000000;
                }

                >span {
                    font-weight: 400;
                    font-size: 20px;
                    color: #666666;
                    min-height: 60px;
                }
            }

            .pb {
                margin-top: 20px;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                .btn {
                    width: 100px;
                    height: 32px;
                    text-align: center;
                    line-height: 32px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                    cursor: pointer;
                    background-color: #D41F19;
                }

                .price {
                    display: flex;
                    align-items: center;

                    >div {
                        display: flex;
                        align-items: center;

                        >span {
                            font-size: 14px;
                            color: #666666;
                            display: inline-block;
                            width: 50px;
                            text-align: justify;
                            text-align-last: justify;
                        }

                        >div {

                            font-size: 14px;
                            color: #D41F19;

                            >span {
                                font-size: 22px;
                                font-weight: bold;
                                text-decoration: line-through;
                            }
                        }

                        .now {
                            text-decoration: none;

                            >span {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }

        &:last-child {
            margin-right: 0;
        }

        img {
            width: 100%;
            height: 400px;
            // object-fit:contain;
        }
    }
}

.contentList {
    display: flex;
    margin-top: 1rem;

    .type {
        margin-right: 18px;

        &:nth-child(2) {
            margin-right: 0;
        }

        width: calc(50% - 9px);

        .tab {
            display: flex;
            position: -webkit-sticky;
            position: sticky;
            top: 5rem;
            padding-bottom: 0.5rem;
            background-color: #fff;
            z-index: 8;
            height: 3.1rem;

            .title {
                font-weight: bold;
                font-size: 1.46rem;
                color: #000000;
                display: flex;
                align-items: flex-end;
            }

            >div {
                display: flex;
                align-items: flex-end;
                margin: 0 2.1rem 8px 1.67rem;
                font-weight: 400;
                font-size: 1.15rem;
                color: #333333;
                flex: 1;

                >div {
                    cursor: pointer;
                    margin-right: 30px;

                    &:last-child {
                        margin-right: 0;
                    }
                }

                .actives {
                    color: #1068E7;
                    font-weight: bold;
                    position: relative;
                }

                .botLine {
                    width: 100%;
                    height: 3px;
                    box-sizing: content-box;
                    position: relative;
                    top: calc(100% + 5px);
                    position: absolute;
                    left: 0;
                    right: 0;

                    >span {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: inline-block;
                        width: 0;
                        height: 3px;
                        background-color: #1068E7;
                        border-radius: 3px;
                    }

                    .active {
                        animation: expandWidth .5s forwards;
                    }

                    @keyframes expandWidth {
                        0% {
                            width: 0;
                        }

                        100% {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .list {

        margin-top: 2px;

        >div {
            margin-bottom: 20px;
        }

    }
}

@media screen and (max-width:768px) {
    .main-con {
        width: 100%;
    }

    .left_main {
        display: none;
    }

    .swiperB {
        height: auto;
        flex-wrap: wrap;

        >div {
            width: 100%;
            margin: 0;
            height: 220px;

            img {
                width: 100%;
                height: 220px;
            }

            .ad {
                top: 30px;

                .downtime {
                    font-size: 17px;
                    padding: 5px 10px;

                    .countdown-container {
                        margin-left: 5px;
                    }
                }

                .info {
                    padding: 10px;
                    width: 220px;

                    >p {
                        font-size: 18px;
                    }

                    >span {
                        font-size: 14px;
                    }
                }

                .pb {
                    .price {
                        >div {
                            >div {
                                font-size: 15px;

                                span {
                                    font-size: 14px;
                                }
                            }
                        }
                    }

                    .btn {
                        width: 40px;
                        height: 20px;
                        font-size: 12px;
                        line-height: 20px;
                    }
                }
            }
        }

    }

    .contentList {
        flex-wrap: wrap;

        .type {
            width: 100%;
            margin: 0;

            .tab {
                padding: 0 10px;
                height: 30px;
                margin: 10px 0;

                .title {
                    font-size: 16px;
                }

                >div {
                    height: 100%;
                    font-size: 15px;

                    >div {
                        margin: 0 10px;
                    }
                }
            }

            .list {
                width: 100vw;
                padding: 0 10px;

                >div {
                    margin: 10px 0;
                }
            }
        }
    }
    .dialog-footer2{
        padding: 30px 0;
        button{
            font-size: 14px;
            line-height: 40px;
            height: 40px;
            width: 120px;
        }
    }
}
</style>